<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { Icon } from '@iconify/vue';
import { storeToRefs } from 'pinia';

import { sysStatusDataStore } from '#/store';

const sysStatusData = sysStatusDataStore();
const { isIntallPlugin, checkPluginStatus } = storeToRefs(sysStatusData) as any;
const router = useRouter();
const useRouteCL = ref<any>([]);

// 获取路由表
const getRoutes = () => {
  const routes = router.getRoutes();

  useRouteCL.value = routes.find(
    (item) => item.name === 'DlyOperation',
  )?.children;
  return routes;
};

onMounted(() => {
  getRoutes();
});
function gotoLinks(link: string) {
  if (!isIntallPlugin.value) {
    checkPluginStatus.value = true;
    return;
  }
  open(link, link);
}
</script>

<template>
  <div
    class="bg-card text-card-foreground border-border mt-5 rounded-xl border lg:mt-0"
  >
    <div class="flex flex-col gap-y-1.5 p-5 py-4">
      <h3 class="text-lg font-semibold tracking-tight">店铺运营必备</h3>
    </div>
    <div class="flex w-full flex-wrap">
      <div
        v-for="(item, index) in useRouteCL"
        :key="index"
        :class="index !== useRouteCL.length - 1 ? 'border-r' : ''"
        class="haoweiboter h-36 w-1/4 cursor-pointer border-t p-4 text-center"
        @click="gotoLinks(item.meta.link)"
      >
        <div class="p-4 text-center">
          <Icon
            :icon="item.meta.icon"
            style="margin: 0 auto; font-size: 28px; color: #f86803"
          />
        </div>
        <a-button style="padding: 0" type="link">
          {{ item.meta.title }}
        </a-button>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.haoweiboter {
  transition: transform 0.1s ease-in-out;

  &:hover {
    // 放大后置顶覆盖其他元素

    // 背景白色
    background-color: #fff;

    // 圆角
    border-radius: 10px;
    //下阴影

    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);

    // 过渡效果

    // 放大0.2倍
    transform: scale(1.2);
  }
}
</style>
